<template>
    <!-- 建投app 手机登录验证提示页面 -->
    <div class="verify-box">
        <header @click="back">
            <van-icon name="cross" @click="clickBtn('close')" class="closeClass" color="#27344B" size="1.2rem" />
            <p>温馨提示</p>
        </header>
        <div class="middle-content">
            <img src="@/assets/images/zxjt/verify-tip.png" alt="">
            <p>{{ middleTextTip }}</p>
        </div>
        <footer>
        <div class="footer-top-box">
            <template v-if="modeType === 'phoneLogin'">
                <van-button type="default" @click="clickBtn('close')" class="close-btn">退出</van-button>
                <van-button type="default" @click="clickBtn('login')"  class="login-btn">
                    去登陆</van-button>
            </template>
            <template v-if="modeType === 'riskPrivate'">
                <van-button type="default" @click="clickBtn('close')" class="close-btn-long">
                    退出</van-button>
            </template>
        </div>
        <img src="@/assets/images/zxjt-logo.png" alt="">
    </footer>
    </div>
</template>

<script>
export default {
    props:{
        modeType:String,//phoneLogin 手机登录  riskPrivate 私密微服务
    },
    data() {
        return {
            middleTextTip:'',

        }
    },
    created() {
        if(this.modeType === 'phoneLogin'){
            this.middleTextTip = '尊敬的投资者，本场直播需要登录观看，感谢您的配合！' ;
        }else if(this.modeType === 'riskPrivate'){
            this.middleTextTip = '尊敬的投资者，本场直播需要适当性匹配，感谢您的配合！' ;
        }
    },
    methods: {
        clickBtn(type){
            switch (type) {
                case 'close':
                    fun.liveBackFun();
                    break;
                case 'login':
                    fun.ykDisposeFun();
                    break;
                default:
                    break;
            }
        }
    }
}
</script>

<style lang="less"  scoped>
    .verify-box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        header {
            width: 100%;
            height: 88px;
            position: relative;

            .closeClass {
                position: absolute;
                width: 88px;
                height: 88px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            p {
                width: 100%;
                line-height: 88px;
                text-align: center;
                font-size: 36px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #27344B;
            }
        }
        .middle-content{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img{
                width: 150px;
                height: 150px;
                margin-bottom: 39px;
            }
            p{
                width: 450px;
                font-size: 28px;
                font-weight: 400;
                color: #27344B;
                line-height: 46px;
            }
        }
        footer {
            width: 100%;
            height: 345px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .footer-top-box {
                width: 100%;
                margin-bottom: 42px;
                font-size: 28px;
                display: flex;
                justify-content: space-evenly;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                /deep/.van-button__text {
                    font-size: 32px;
                }
                button {
                    width: 340px;
                    height: 80px;
                    border-radius: 4px;
                    border: none;
                }
                .close-btn {
                    background-color: rgba(255, 240, 234, 1);
                    color: rgba(254, 90, 0, 1);
                }
                .close-btn-long{
                    width: 500px;
                    background-color: rgba(254, 90, 0, 1);                   
                    color: #FFFFFF;
                }
                .login-btn {                  
                    background-color: rgba(254, 90, 0, 1);                   
                    color: #FFFFFF;
                    box-shadow: 0px 15px 15px rgba(254, 90, 0, 0.2);
                }
            }
            img {
                width: 324px;
                height: 68px;
            }
        }
    }
</style>